<template>
    <div class="classify-table__wrapper">
        <el-table :data="renderData" border class="classify-table__item" size="mini">
            <el-table-column label="分类名">
                <template slot-scope="{row}">
                    <section class="classify-name-editor__group" v-if="row.edit">
                        <el-input v-model="row.name" size="mini" />
                        <el-button
                            size="mini"
                            @click="onClickSubmitBtn(row)"
                            class="submit-btn__item"
                            icon="el-icon-finished"
                            type="success"
                        >提交</el-button>
                    </section>
                    <span v-else>{{ row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="稿件数" align="center" prop="count" width="100"></el-table-column>
            <!-- 操作 -->
            <el-table-column align="right" width="185">
                <el-button
                    size="mini"
                    @click="onClickCreateClassifyBtn"
                    icon="el-icon-plus"
                    slot="header"
                    type="info"
                >新增</el-button>
                <template slot-scope="{$index,row}">
                    <!-- 删除 -->
                    <el-button
                        size="mini"
                        @click="onClickDeleteClassifyBtn( $index, row )"
                        icon="el-icon-delete"
                        type="danger"
                        v-if="row.edit"
                    >删除</el-button>
                    <!-- 编辑 -->
                    <el-button
                        size="mini"
                        @click="onClickEditClassifyBtn( $index, row )"
                        icon="el-icon-edit-outline"
                        type="primary"
                        v-if="!row.edit"
                    >编辑</el-button>
                    <!-- 取消 -->
                    <el-button
                        size="mini"
                        @click="onClickCancelClassifyBtn( $index, row )"
                        icon="el-icon-refresh-left"
                        type="warning"
                        v-else
                    >取消</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {
    audioClassifyFinderAPI,
    audioClassifyCreatorAPI,
    audioClassifyUpdatorAPI,
    audioClassifyDestroyerAPI,
} from "@/api/km_archive_audio";

export default {
    data() {
        return {
            renderData: [],
        };
    },
    created() {
        this.getClassifyData();
    },
    methods: {
        // 获取分类数据
        getClassifyData() {
            audioClassifyFinderAPI()
                .then((result) => {
                    const formatData = result.data.reduce((pv, val) => {
                        pv.push({
                            ...val,
                            edit: false,
                            rawName: val.name,
                        });
                        return pv;
                    }, []);
                    this.renderData = formatData;
                })
                .catch(() => {
                    this.$message.error("网络错误,请重试");
                });
        },
        // 点击新增按钮事件
        onClickCreateClassifyBtn() {
            this.$prompt("请输入分类名", "新建分类", {
                confirmButtonText: "确认新建",
                cancelButtonText: "取消新建",
            })
                // 点击弹框确认按钮
                .then((res) => {
                    this.createClassifyHandler({
                        name: res.value,
                    });
                })
                // 点击弹框取消按钮
                .catch(() =>
                    this.$message({ type: "info", message: "已取消新建" })
                );
        },
        // 添加分类处理器
        createClassifyHandler(name) {
            audioClassifyCreatorAPI(name)
                .then(() => {
                    this.getClassifyData();
                })
                .catch(() => {
                    this.$message.error("网络错误,请重试");
                });
        },
        // 点击删除按钮事件
        onClickDeleteClassifyBtn(index, classify) {
            // 弹框确认
            this.$confirm(
                "删除分类,该分类下的稿件会全部成为未分类状态,是否删除?",
                "删除分类提示",
                {
                    confirmButtonText: "确认删除",
                    cancelButtonText: "取消删除",
                    type: "warning",
                }
            )
                // 点击弹框确认按钮
                .then(() => {
                    this.destoryClassHandler(classify.cid);
                })
                // 点击弹框取消按钮
                .catch(() =>
                    this.$message({ type: "info", message: "已取消删除" })
                );
        },
        // 删除分类处理器
        destoryClassHandler(cid) {
            audioClassifyDestroyerAPI(cid)
                .then(() => {
                    this.getClassifyData();
                })
                .catch(() => {
                    this.$message.error("网络错误,请重试");
                });
        },
        // 点击编辑按钮
        onClickEditClassifyBtn(index, classify) {
            classify.edit = true;
        },
        // 点击提交按钮
        async onClickSubmitBtn(row) {
            // 名称没有改变的话就直接退出函数
            if (row.name === row.rawName) {
                row.edit = false;
                return;
            }
            // 调用修改分类名称接口
            audioClassifyUpdatorAPI(row.cid, {
                name: row.name,
            })
                .then(({ code }) => {
                    // 修改成功
                    if (code === 200) {
                        row.edit = false;
                        row.rawName = row.name;
                        this.getClassifyData();
                    } else if (code === 400) {
                        //  分类id错误
                        this.$message.error("参数错误");
                    }
                })
                .catch(() => {
                    this.$message.error("网络错误,请重试");
                });
        },
        // 点击取消编辑按钮
        onClickCancelClassifyBtn(index, classify) {
            classify.edit = false;
            classify.name = classify.rawName;
        },
    },
};
</script>

<style lang="scss" scoped>
.classify-table__wrapper {
    padding: 20px;
}
// 表格
.classify-table__item {
    // margin: 20px;
    // 分类名称编辑器组
    .classify-name-editor__group {
        display: flex;
        align-items: center;
        // 提交按钮
        .submit-btn__item {
            margin-left: 10px;
        }
    }
    // 分类图标相关
    .classify-icon__item {
        width: 40px;
        height: 40px;
    }
    // 图标上传input道具
    .classify-icon-uploader__item {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        opacity: 0;
        cursor: pointer;
    }
}
</style>
